<template>
  <div class="hello">
    <div>{{count}}</div>
    <div>{{addCount}}</div>
    <button @click="handleCount">控制count</button>
    <button @click="asynCount">异步count</button>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {};
  },
  computed: {
    count(){
      return this.$store.state.count;
    },
    addCount(){
      return this.$store.getters.addCount;
    }
  },
  methods: {
    handleCount(){
      this.$store.commit('handleCount', 10);
    },
    asynCount(){
      this.$store.dispatch('asynCount', 20)
    }
  },
};
</script>

<style scoped>
</style>
